<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide nth1">
            <div class="gohome">
                <img src="img/gohome.png">
                <span class="text_01">听了再多普通话</span>
                <span class="text_02">依然怀恋萦绕</span>
                <span class="text_03">耳边的乡音</span>
                <span class="text_04">The free service hotline</span>
            </div>
        </div>
        <div class="swiper-slide nth2">
            <div class="spring">
                <img src="img/sping.png">
                <span class="text_01">
                    春运，即春节运输，是中国在农历春节<br>
                    前后发生的一种大规模的<br>
                    高交通运输压力的现象<br>
                    以春节为中心，共40天左右<br>
                    每年农历腊月十五到次年正月廿五
                </span>
            </div>
        </div>
        <div class="swiper-slide nth3">
            <div class="athome">
                <img src="img/athome.png">
                <div class="dateBox">
                    <span class="item">廿四扫尘日</span>
                    <span class="item">廿五接玉皇</span>
                    <span class="item">廿六洗福禄</span>
                    <span class="item">廿八贴年红</span>
                    <span class="item">廿九小除夕</span>
                </div>
            </div>
        </div>
        <div class="swiper-slide nth4"></div>
    </div>
</div>

<script src="js/swiper.min.js"></script>
<script>

    var swiper = new Swiper('.swiper-container',{
        direction : 'vertical',
        loop:true,
        on:{
            init:function(swiper){
                slide=this.slides.eq(0);
                slide.addClass('active');
            },
            transitionStart: function(){
                for(i=0;i<this.slides.length;i++){
                    slide=this.slides.eq(i);
                    slide.removeClass('active');
                }
            },
            transitionEnd: function(){
                slide=this.slides.eq(this.activeIndex);
                slide.addClass('active');

            },
        }
    });


</script>

</body>
</html>